<template>
  <!--单独封装的图标组件-->
  <div class="icon-com layer">
    <span
      v-show="showConfigItem.icon"
      class="icon-item"
      :class="[`ths-icon-${timeLineItem.name}`]"
      @click="handleIcon(timeLineItem, 'icon')"
    ></span>
    <span
      v-show="showConfigItem.selectable"
      class="icon-item selectable iconfont"
      :class="[timeLineIcon.selectable[timeLineItem.iconDisable.selectable]]"
      @click="handleIcon(timeLineItem, 'selectable')"
    ></span>
    <span
      v-show="showConfigItem.show"
      class="icon-item show"
      :class="[timeLineIcon.show[timeLineItem.iconDisable.show], playing ? 'icon-dis' : '']"
      @click="handleIcon(timeLineItem, 'show')"
    ></span>
    <span
      v-show="showConfigItem.sound"
      class="icon-item sound"
      :class="[timeLineIcon.sound[timeLineItem.iconDisable.sound], playing ? 'icon-dis' : '']"
      @click="handleIcon(timeLineItem, 'sound')"
    ></span>
    <span
      v-show="showConfigItem.contract"
      class="icon-item contract"
      :class="[timeLineIcon.contract[timeLineItem.iconDisable.contract]]"
      @click="handleIcon(timeLineItem, 'contract')"
    ></span>
  </div>
</template>

<script>
import { TIME_LINE_ICON } from '@veditor/components/timeLine/js/enums';
// 定义type的不同显示按钮
const SHOW_CONFIG = {
  father: {
    icon: true,
    selectable: true,
    show: true,
    sound: true,
    contract: true,
  },
  children: {
    icon: true,
    selectable: false,
    show: false,
    sound: false,
    contract: false,
  },
};
export default {
  name: 'IconCom',
  props: {
    timeLineItem: {
      type: Object,
      required: true,
    },
    type: {
      type: String,
      required: true,
    },
    playing: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      timeLineIcon: TIME_LINE_ICON,
    };
  },
  computed: {
    showConfigItem() {
      return SHOW_CONFIG[this.type];
    },
  },
  methods: {
    handleIcon(item, type) {
      this.$emit('clickIcon', item, type);
    },
  },
};
</script>

<style lang="stylus" scoped>
.icon-com.layer
  height 30px
  margin-bottom 6px
  display flex
  align-items center
  justify-content center
  .icon-item
    cursor pointer
    margin-right 12px
    &:last-child
      margin-right unset
    &.icon-dis
      cursor not-allowed
    &.selectable.dis
      color #585c63
      cursor not-allowed
    &.selectable.on
    &.selectable.off
      color #595FFF
.ths-icon-vtuber
  display block
  width 20px
  height 20px
  background-image url('../assets/vtuber.svg')
  background-size 100%
.ths-icon-bgMusic
  display block
  width 20px
  height 20px
  background-image url('../assets/bgMusic.svg')
  background-size 100%
.ths-icon-sticker
  display block
  width 20px
  height 20px
  background-image url('../assets/sticker.svg')
  background-size 100%
.ths-icon-signature
  display block
  width 20px
  height 20px
  background-image url('../assets/signature.svg')
  background-size 100%
.ths-icon-graphics
  display block
  width 20px
  height 20px
  background-image url('../assets/graphics.svg')
  background-size 100%
.ths-icon-videoType
  display block
  width 20px
  height 20px
  background-image url('../assets/videoType.svg')
  background-size 100%
.ths-icon-shape
  display block
  width 20px
  height 20px
  background-image url('../assets/shape.svg')
  background-size 100%
.ths-icon-action
  display block
  width 20px
  height 20px
  background-image url('../assets/action.svg')
  background-size 100%
.ths-icon-background3d
  display block
  width 20px
  height 20px
  background-image url('../assets/background3d.svg')
  background-size 100%
.ths-icon-camera
  display block
  width 20px
  height 20px
  background-image url('../assets/camera.svg')
  background-size 100%
.ths-icon-textDrive
  display block
  width 20px
  height 20px
  background-image url('../assets/textDrive.svg')
  background-size 100%
.ths-icon-audioDrive
  display block
  width 20px
  height 20px
  background-image url('../assets/audioDrive.svg')
  background-size 100%
.ths-icon-aiFinTemplate
  display block
  width 20px
  height 20px
  background-image url('../assets/aiFinTemplate.png')
  background-size 100%
//下边是其他图标
.ths-icon-eyeDis
  display block
  width 20px
  height 20px
  background-image url('../assets/eyeDis.svg')
  background-size 100%
  background-repeat no-repeat
  cursor not-allowed !important
.ths-icon-eyeOn
  display block
  width 20px
  height 20px
  background-image url('../assets/eyeOn.svg')
  background-size 100%
  background-repeat no-repeat
.ths-icon-eyeOff
  display block
  width 20px
  height 20px
  background-image url('../assets/eyeOff.svg')
  background-size 100%
  background-repeat no-repeat
.ths-icon-soundDis
  display block
  width 20px
  height 20px
  background-image url('../assets/soundDis.svg')
  background-size 100%
  background-repeat no-repeat
  cursor not-allowed !important
.ths-icon-soundOn
  display block
  width 20px
  height 20px
  background-image url('../assets/soundOn.svg')
  background-size 100%
  background-repeat no-repeat
.ths-icon-soundOff
  display block
  width 20px
  height 20px
  background-image url('../assets/soundOff.svg')
  background-size 100%
  background-repeat no-repeat
.ths-icon-contractDis
  display block
  width 20px
  height 20px
  background-image url('../assets/contractDis.svg')
  background-size 100%
  background-repeat no-repeat
  cursor not-allowed !important
.ths-icon-contractOn
  display block
  width 20px
  height 20px
  background-image url('../assets/contractOn.svg')
  background-size 100%
  background-repeat no-repeat
.ths-icon-contractOff
  display block
  width 20px
  height 20px
  background-image url('../assets/contractOff.svg')
  background-size 100%
  background-repeat no-repeat
.ths-icon-chart
  display block
  width 20px
  height 20px
  background-image url('../assets/chart.svg')
  background-size 100%
.ths-icon-emotion
  display block
  width 20px
  height 20px
  background-image url('../assets/emotion.svg')
  background-size 100%
</style>
